<template>
  <div class="page-container">
    <div class="car-purchase-box">
      <card class="add-info-card" title="车辆信息" toggle>
        <div class="section-item gray car-model-1000 relative">
          <div class="flex">
            <car-info-block
              :carInfo="carInfo"
              :tags="[carInfo.statusStr]"
              :fieldList="[
                { label: '归属门店', prop: 'siteName' },
                { label: '车辆费用单号', prop: 'businesCode' },
                { label: '合同开始时间', prop: 'startTime' },
                { label: '合同结束时间', prop: 'endTime' },
                { label: '汽车销售', prop: 'supplierName' },
                { label: '车辆来源', prop: 'sourceNameV5' },
              ]"
            />
          </div>
        </div>
      </card>
      <list-searcher :searchList="searchList" v-model:searchForm="queryParam" @loadData="purchaseFeeDetailFn" />
      <table-index class="insure-card-table" :table="tableCompulsory" @loadData="purchaseFeeDetailFn">
        <template #table-summary>
          <div class="table-info">
            <span class="table-info-item">
              费用合计：<span class="a-link">{{ unitVal(orderDetails?.totalAmount, '元') }}</span>
            </span>
            <span class="table-info-item">
              车辆费用应付：
              <span class="a-link">{{ unitVal(orderDetails?.purchaseTotalAmount, '元') }}</span>
            </span>
            <span class="table-info-item">
              车辆费用实付： <span class="a-link">{{ unitVal(orderDetails?.purchasePayAmount, '元') }}</span>
            </span>
            <span class="table-info-item">
              其他费用应付： <span class="a-link">{{ unitVal(orderDetails?.otherFeeTotalAmountPay, '元') }}</span>
            </span>
            <span class="table-info-item">
              其他费用实付： <span class="a-link">{{ unitVal(orderDetails?.otherFeeHarvestAmount, '元') }}</span>
            </span>
            <span class="table-info-item">
              其他费用应收： <span class="a-link">{{ unitVal(orderDetails?.otherFeeTotalAmountHarvest, '元') }}</span>
            </span>
            <span class="table-info-item">
              其他费用实收： <span class="a-link">{{ unitVal(orderDetails?.otherFeeNetReceiptsAmount, '元') }}</span>
            </span>
          </div>
        </template>
        <template #selectkey>
          <div></div>
        </template>
        <template #feeName="{ record }">
          <span v-if="record.installment === 1">{{ record.feeCategoryName }}-{{ record.feeName }}</span>
          <span v-else>{{ record.feeCategoryName }}</span>
        </template>
        <template #recordConfirmUserName="{ record }"> {{ record.recordConfirmUserName }} {{ record.recordConfirmTime }} </template>
        <template #confirmUserName="{ record }">
          <div>{{ record.confirmUserName }}</div>
          <div>{{ record.confirmTime }}</div>
        </template>
        <template #expand-icon="{ expanded }">
          <icon-plus-circle class="icon-custom" v-if="!expanded" />
          <icon-minus-circle class="icon-custom" v-else />
        </template>
        <template #recordCode="{ record }">
          <div v-for="item in record.feeRecordList" :key="item">
            {{ item.recordCode }}
          </div>
        </template>
      </table-index>
    </div>
  </div>
</template>

<script setup lang="ts" name="ViolationDetail">
  import { ref, onMounted, reactive, computed } from 'vue'
  import { useRoute } from 'vue-router'
  import { purchaseFeeDetail } from '@/api/asset/car'
  import { useTable } from '@/hooks/table'
  import { unitVal } from '@/utils'
  import { usePageDict } from '@/hooks/useDict'
  const dict = usePageDict('carAssetFeeDict')

  const route = useRoute()
  const routeQuery = route.query

  const carInfo = ref<any>({})
  const tableCompulsory = useTable({
    columns: [
      { title: '费用名称', dataIndex: 'feeName', slotName: 'feeName', fixed: 'left', width: 180 },
      { title: '费用类型', dataIndex: 'feeTypeName' },
      { title: '收支类型', dataIndex: 'costTypeName' },
      { title: '费用金额', dataIndex: 'totalAmount', unit: '元' },
      { title: '实结金额', dataIndex: 'payAmount', unit: '元' },
      { title: '待结金额', dataIndex: 'outstandingAmount', unit: '元' },
      { title: '生成节点', dataIndex: 'createNodeName' },
      { title: '生成时间', dataIndex: 'createTime', width: 180 },
      { title: '应结日期', dataIndex: 'dueDate', width: 180 },
      { title: '收支方式', dataIndex: 'payTypeStr' },
      { title: '收支账号', dataIndex: 'account' },
      { title: '费用状态', dataIndex: 'feeStatusName' },
      { title: '确认时间', dataIndex: 'confirmTime', width: 180 },
      { title: '确认人', dataIndex: 'confirmUserName' },
      { title: '费用备注', dataIndex: 'remark' },
      { title: '费用对账信息', dataIndex: 'confirmUserName', slotName: 'confirmUserName', width: 230 },
      { title: '流水号', dataIndex: 'recordCode', slotName: 'recordCode', width: 210 },
      { title: '流水状态', dataIndex: 'recordStatusName' },
      {
        title: '流水确认信息',
        dataIndex: 'recordConfirmUserName',
        slotName: 'recordConfirmUserName',
        width: 230,
        fixed: 'right',
        ellipsis: true,
      },
    ],
  })

  const param = reactive<any>({})
  const orderDetails = ref()
  const queryParam = reactive({})
  // 查询条件
  const searchList = computed(() => {
    return [
      // { label: '费用类型', prop: 'feeType', type: 'a-select', options: dict.carAssetFeeTypeEnum },
      { label: '收支类型', prop: 'costType', type: 'a-select', options: dict.costTypeEnum },
      { label: '费用状态', prop: 'feeStatus', type: 'a-select', options: dict.feeStatusEnum },
    ]
  })
  // 字段处理
  const tabletolist = (list: any) => {
    list?.forEach((el: any) => {
      el.mtype = 'MENU'
      el.level = 1
      if (el.feeDetailList && el.feeDetailList.length) {
        el.children = el.feeDetailList
        el.children?.forEach((pl: any) => {
          pl.id = pl.id + 10000 //因折叠根据id问题(父子级id相同)，数据只做展示，故自定义
          pl.mtype = 'TERM1'
          pl.expand = null
          pl.feeCategoryName = pl.itemName
          pl.totalAmount = pl.amount
        })
      } else {
        return false
      }
    })
    return list
  }

  const purchaseFeeDetailFn = async () => {
    tableCompulsory.tableLoading = true
    const { result } = await purchaseFeeDetail(param)
    console.log('data', result)
    console.log('queryParam', queryParam)

    orderDetails.value = result
    carInfo.value = {
      ...result.carInfo,
      businesCode: result.businesCode,
      siteName: result.siteName,
      supplierName: result.supplierName,
      startTime: result.startTime,
      endTime: result.endTime,
    }

    const dataOne = []
    if(result.carAssetFeeList && result.carAssetFeeList.length){
      result.carAssetFeeList.forEach((i)=>{
        if((queryParam.feeType == undefined || queryParam.feeType === i.feeType) && (queryParam.costType == undefined || queryParam.costType === i.costType) && (queryParam.feeStatus == undefined || queryParam.feeStatus === i.feeStatus) ){
          console.log(i)
          dataOne.push(i)
        }
      })
    }
    const carAssetFeeList = dataOne

    setTimeout(() => {
      tableCompulsory.dataList = tabletolist(carAssetFeeList)
    }, 0)

    tableCompulsory.tableLoading = false
    // data.forEach((item: any) => {
    //   item.information = item.confirmUserName && item.confirmTime ? `${item.confirmUserName} ${item.confirmTime}` : ''
    // })
  }

  onMounted(() => {
    if (route.params.id) {
      param.businesCode = route.params.id
      param.carId = routeQuery.carId
      param.feeCategoryList = [0, 5, 6]
      purchaseFeeDetailFn()
    }
  })
</script>

<style lang="less" scoped>
  .table-info {
    display: flex;
    align-items: center;
    .table-info-item {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      margin-right: 10px;

      .a-link {
        color: #1890ff;
      }
    }
  }
</style>
